<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Book List</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    window.onload = function () {
      let app = new Vue({
        el: '#app',
        data: {
          bookList: [
            { id: 1, bookname: '斗破苍穹', price: 40, auth: '天蚕土豆' },
            { id: 2, bookname: '雪中悍刀行', price: 100, auth: '烽火戏诸侯' },
            { id: 3, bookname: '斗罗大陆', price: 100, auth: '唐家三少' }
          ],
          newBook: {
            bookname: '',
            price: '',
            auth: ''
          }
        },
        computed: {
          bookCount() {
            // 返回当前书籍的数量
            return this.bookList.length;
          }
        },
        methods: {
          addBook() {
            // 检查输入是否完整
            if (!this.newBook.bookname || !this.newBook.price || !this.newBook.auth) {
              alert('请填写完整信息！');
              return;
            }

            // 生成新的 ID
            const newId = this.bookList.length ? Math.max(...this.bookList.map(book => book.id)) + 1 : 1;

            // 添加新书
            this.bookList.push({
              id: newId,
              bookname: this.newBook.bookname,
              price: this.newBook.price,
              auth: this.newBook.auth
            });

            // 清空输入框
            this.newBook = { bookname: '', price: '', auth: '' };
          },
          deleteBook(index) {
            // 删除对应索引的书籍
            this.bookList.splice(index, 1);
          }
        }
      });
    }
  </script>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 20px;
    }
    .addlist {
      margin-bottom: 20px;
    }
    .addlist input {
      margin-right: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .books {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .books span {
      flex: 1;
      text-align: center;
    }
    .add-button, .delete-button {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      color: white;
    }
    .add-button {
      background-color: #42b983;
    }
    .add-button:hover {
      background-color: #3a9c72;
    }
    .delete-button {
      background-color: #ff4d4f;
    }
    .delete-button:hover {
      background-color: #e63946;
    }
    .book-count {
      font-size: 18px;
      margin-bottom: 20px;
      color: #333;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 显示书籍总数 -->
    <div class="book-count">当前图书数量：{{ bookCount }}</div>

    <!-- 添加新书 -->
    <div class="addlist">
      <input type="text" v-model="newBook.bookname" placeholder="书名">
      <input type="number" v-model.number="newBook.price" placeholder="价格">
      <input type="text" v-model="newBook.auth" placeholder="作者">
      <button class="add-button" @click="addBook">添加书籍</button>
    </div>

    <!-- 显示书籍列表 -->
    <div class="books" v-for="(item, index) in bookList" :key="item.id">
      <span>{{ item.bookname }}</span>
      <span>{{ item.price }} 元</span>
      <span>{{ item.auth }}</span>
      <button class="delete-button" @click="deleteBook(index)">删除</button>
    </div>
  </div>

  
</body>

</html>